<template>
  <div class="amap-page-container">
    <div :style="{ width: '100%', height: 'calc(100vh - 72px)' }">
      <el-amap vid="amap"
               class="amap-demo"
               :zoom="zoom">
        <el-amap-marker v-for="marker in markers"
                        :position="marker.position"
                        :key="marker.id"
                        :events="marker.events"
                        :icon="marker.icon"></el-amap-marker>
        <el-amap-info-window v-if="window"
                             :position="window.position"
                             :visible="window.visible"
                             :content="window.content"
                             :offset="window.offset"></el-amap-info-window>
      </el-amap>
    </div>
  </div>
</template>

<script>
// import AMap from 'AMap'
import { realdatasMap } from '../../api/index'
import location from '../../assets/images/icon_zaixian.png'
import location1 from '../../assets/images/icon_lixian.png'
export default {
  data() {
    // const self = this;
    return {
      // center: [121.59996, 31.197646],
      // lng: 0,
      // lat: 0,
      loaded: false,
      center: [117, 36],
      zoom: 4,
      // mapStyle: "amap://styles/blue", //修改地图的背景颜色
      markers: [],
      windows: [],
      window: '',
      pointMarker: [],
    }
  },
  mounted() {
    this.getRealdata()
    setInterval(() => {
      this.getRealdata()
    }, 60000)
  },
  methods: {
    getRealdata() {
      realdatasMap().then((res) => {
        this.pointMarker = res.data
        this.point()
      })
    },
    point() {
      //自定义map点坐标图标
      // let icon = new AMap.Icon({
      //     image: location,
      //     size: new AMap.Size(2, 2),
      //     imageSize: new AMap.Size(2, 2)
      // });

      let markers = []
      let windows = []
      let that = this
      let a = 1
      this.pointMarker.forEach((item, index) => {
        markers.push({
          position: [item.lng, item.lat],
          icon: item.s == 1 ? location : location1, //不设置默认蓝色水滴
          events: {
            mouseover() {
              that.windows.forEach((window) => {
                window.visible = false //关闭窗体
              })
              that.window = that.windows[index]
              that.$nextTick(() => {
                that.window.visible = true //点击点坐标，出现信息窗体
              })
            },
            mouseout() {
              that.windows.forEach((window) => {
                window.visible = false //关闭窗体
              })
              that.window = that.windows[index]
            },
          },
        })
        let name = item.deviceInfo.name ? item.deviceInfo.name : '--'
        let phone = item.deviceInfo.chargePhone
          ? item.deviceInfo.chargePhone
          : '--'
        let sn = item.deviceInfo.sn ? item.deviceInfo.sn : '--'
        let address = item.deviceInfo.address ? item.deviceInfo.address : '--'
        windows.push({
          position: [item.lng, item.lat],
          content:
            '' +
            "<div style='padding:23px 20px;width:258px;box-shadow: 0px 2px 6px 0px rgba(49, 49, 49, 0.16);border-radius: 8px;background:#fff'>" +
            "<div style='font-size: 20px;font-weight: bold;color: #202224;padding-bottom:16px'>" +
            name +
            '</div>' +
            "<div style='margin-bottom:10px;'>" +
            "<span style='color:#999999;'>地址：" +
            address +
            '</span></div>' +
            "<div style='margin-bottom:10px;'>" +
            "<span style='color:#999999;'>编号：" +
            sn +
            '</span></div>' +
            '</div>',
          offset: [15, -25], //窗体偏移
          visible: false, //初始是否显示
        })
      })
      //添加点标注
      this.markers = markers
      //生成弹窗
      this.windows = windows
    },
  },
}
</script>

<style>
.amap-demo {
  height: calc(100vh - 72px);
}
.amap-info-content {
  padding: 0;
  background: none;
}
</style>